<template lang="pug">
  mt-popup.buy-option-box(v-if="modelData",v-model="popupVisible",position="bottom",:closeOnClickModal="false")
    .close-btn(@click="$emit('close');popupVisible=false") X
    .container
      .info
        img.icon(:src="modelData.icon")
        h4 {{modelData.title}}
        .extra
          span 月售: {{modelData.sales}}
          span 好评: {{modelData.likes}}
        strong 价格: ￥{{price}} &nbsp; VIP价格 ￥{{vipPrice}}
      .content(ref="mainWrapper")
        div(style="display: table;width: 100%")
          .model-list(v-if="modelData.models && modelData.models.length")
            h4 型号:
            ul
              li(v-for="(item, index) in modelData.models",@click="selectModel(item, index)",:class="{current: item.id === currentModelId}") {{item.title}}
          .count
            h4 购买数量:
            .stepper
              div.reduce(@click="count = (count > 1 ? parseInt(count) - 1 : 1)") -
              input(type="text",v-model="count")
              div.plus(@click="count = parseInt(count) + 1") +
          .message
            h4 留言:
            textarea
      .toolbar
        button(@click="shoppingHandler(false)") 加入购物车
        button(@click="shoppingHandler(true)") 立即购买
</template>

<script>
import { Toast, Button, Popup, Field } from 'mint-ui'
import BScroll from 'better-scroll'
import { mapActions } from 'vuex'
export default {
  components: {
    'mt-button': Button,
    'mt-popup': Popup,
    'mt-field': Field
  },
  data () {
    return {
      mainScroll: null,
      popupVisible: false,
      modelData: null,
      currentModelId: null,
      price: 0,
      vipPrice: 0,
      count: 1,
      modelId: null
    }
  },
  props: {
    model: {
      type: Object
    },
    activityId: {
      type: Number,
      default: 0
    }
  },
  watch: {
    model: async function (val, oldval) {
      if (val) {
        this.modelData = val
        this.price = val.price
        this.vipPrice = val.vip_price
        this.popupVisible = true
        this.count = 1
        this.modelId = val.id
        if (val.models && val.models.length) {
          this.currentModelId = val.models[0].id
        }
        this._initScroll()
      }
    }
  },
  methods: {
    ...mapActions({
      addCart: 'addCart'
    }),
    _initScroll () {
      this.$nextTick(() => {
        if (!this.mainScroll) {
          this.mainScroll = new BScroll(this.$refs.mainWrapper, {
            probeType: 1,
            click: true,
            scrollbar: {
              fade: true,
              interactive: false
            }
          })
        } else {
          this.mainScroll.refresh()
          this.mainScroll.scrollTo(0, 0, 0)
        }
      })
    },
    selectModel (item, index) {
      this.currentModelId = item.id
      this.price = item.price
      this.vipPrice = item.vip_price
    },
    shoppingHandler (redirect) {
      this.$emit('close')
      this.popupVisible = false
      this.addCart({id: this.currentModelId, model: this.modelData, order: {activityId: this.activityId, modelId: this.currentModelId, count: this.count}})
      if (redirect) {
        this.$router.push({ name: 'cart:index' })
      } else {
        Toast('已经加入购物车')
      }
    }
  }
}
</script>
<style lang="stylus" scoped>
.buy-option-box
  padding: 0
  width: 100%
  height: 10rem
  position: absolute
  bottom: 0
  box-sizing: border-box
  margin: 0
  padding: 0
  .close-btn
    position: absolute
    right: .2rem
    top: .2rem
    width: .6rem
    height: .6rem
    border: 1px solid #ccc
    border-radius: 50%
    text-align: center
    cursor: pointer
    color: #ccc
    line-height: .6rem
    z-index: 10
.container
  position: relative
  display: inline-block
  width: 100%
  height: 100%
  h4
    color: #333
  .content
    position: absolute
    top: 2.5rem
    bottom: 0
    width: 100%
    display: inline-block
    overflow: hidden
    &>div
      padding-bottom: 1.2rem
  .info
    position: relative
    width: 96%
    margin: 0 auto
    height: 2.4rem
    border-bottom: 1px solid #e9e9e9
    h4
      position: absolute
      left: 3.2rem
      line-height: 1.2rem
    .extra
      position: absolute
      left: 3.2rem
      line-height: 1.2rem
      font-size: .3rem
      top: 0.6rem
      color: #333
      span
        padding-right: .3rem
    strong
      position: absolute
      left: 3.2rem
      line-height: 1.2rem
      font-size: .3rem
      color: #fa4a47
      top: 1.3rem
    img.icon
      width: 2.5rem
      height: 2.5rem
      position: absolute
      margin-top: -0.4rem
      margin-left: .3rem
      border-radius: .06rem
      border: 1px solid rgba(66, 66, 66, 0.1)
  .model-list
    padding: .4rem 0
    width: 96%
    border-bottom: 1px solid #e9e9e9
    position: relative
    display: inline-block
    margin-left: .2rem
    ul
      li
        margin: .2rem
        border: 1px solid #e9e9e9
        padding: .1rem
        float: left
        list-style: none
        cursor: pointer
        border-radius: .2rem
        color: #666
        &.current
          background: #eee
  .count
    padding: .4rem 0
    color: #333
    position: relative
    height: 1.5rem
    width: 96%
    margin-left: .2rem
    border-bottom: 1px solid #e9e9e9
    .stepper
      position: absolute
      right: .5rem
      top: .3rem
  .message
    color: #333
    padding: .4rem 0
    margin-left: .2rem
    textarea
      outline: none
      width: 95%
      margin: 0 auto
      resize: none
      border: 1px solid #e9e9e9
      height: 3rem
      box-sizing: border-box
      padding: .2rem
      border-radius: .1rem
  .toolbar
    width: 100%
    position: absolute
    bottom: 0
    left: 0
    height: 1.2rem
    button
      border: none
      width: 50%
      height: 100%
      float: left
      outline: none
      color: #fff
      font-weight: bold
      font-size: .4rem
      cursor: pointer
      &:first-child
        background: #ff8856
      &:last-child
        background: #ff4344
.stepper
  height: .8rem
  text-align: center
  line-height: .8rem
  div
    float: left
    width: .8rem
    height: 100%
    cursor: pointer
    border: 1px solid #e9e9e9
  .reduce
    border-radius: .2rem 0 0 .2rem
  .plus
    border-radius: 0 .2rem .2rem 0
  input
    border: none
    border-top: 1px solid #e9e9e9
    border-bottom: 1px solid #e9e9e9
    outline: none
    float: left
    height: 100%
    width: .8rem
    text-align: center
</style>
